<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01css操作</title>
</head>
<body>
    
    <ul>
        <li>陈伟霆</li>
        <li>胡一天</li>
        <li>彭于晏</li>
        <li>帅的人</li>
    </ul>

    <script src="../jquery-3.2.1.js"></script>
    <script>
        /*
        $(function(){
            // css(name,value)  修改单个样式
           $("li").css("backgroundColor","pink")
           .css("color","#FF4040")
           .css("fontSize","28px");
        });
        */

        // 对象  修改多个样式
        $("li").css({
            backgroundColor: "pink",
            color: "#FF4040",
            fontSize: "28px",
            border: "1px solid green",
        });

        // 获取样式
        console.log($("li").css("fontSize"));
        console.log($("li").css("color"));

        $("li").eq(0).css("fontSize","20px");
        $("li").eq(1).css("fontSize","22px");
        $("li").eq(2).css("fontSize","24px");
        $("li").eq(3).css("fontSize","26px");

        // 隐式迭代：设置操作的时候 会给jq内部所有对象都设置上相同的值
        // 获取的时候：只会返回第一个元素对应的值  不遍历
        console.log($("li").css("fontSize"));
    
    </script>
</body>
</html>